<template>
	<view class="particulars">
		<view class="swiper">
			<swiper circular :autoplay="true" class="swiper1">
				<swiper-item v-for="value in data.goods_banner" :key="value">
					<image :src="$imgUrl + value"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="mian">
			<view class="price">
				<p>{{data.goods_name}}<span>{{data.goods_virtual_sales}}人选择</span></p>
				<span>{{data.intro}}</span>
				<view>
					￥{{data.goods_price}}
					<u-icon name="clock-fill" color="#52C276" size="20"></u-icon>
					<p>{{data.duration}}分钟</p>
				</view>
			</view>
			<view class="module">
				<view>
					<span></span>
					<p>使用说明</p><span></span>
				</view>
				<image :src="$imgUrl+data.limit_intro" mode="widthFix"></image>
			</view>
			<view class="module">
				<view>
					<span></span>
					<p>项目详情</p><span></span>
				</view>
				<image v-for="value in data.goods_detail" :src="$imgUrl+value" mode="widthFix"></image>
			</view>
			<view class="module">
				<view>
					<span></span>
					<p>下单须知</p><span></span>
				</view>
				<image :src="$imgUrl+data.order_notice" mode="widthFix"></image>
			</view>
		</view>
		<button @click="skip('/pages/assistant/assistant?page=1&goods_id='+id)">选择技师</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},
				id: '',
				index: ''
			};
		},
		onLoad(res) {
			this.id = uni.getStorageSync('id')
			this.getGoodsInfo(this.id)
			this.index = res.cid
		},
		methods: {
			getGoodsInfo(id) {
				this.$httpRequest('/goods/getGoodsInfo', {
					id
				}).then(res => {
					console.log(res)
					this.data = res.data
				})
			},
			skip(url) {
				uni.navigateTo({
					url,
				})
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},
	}
</script>

<style lang="less">
	.particulars {
		background-color: #F0F0F0;
		color: #333;
		padding-bottom: 80rpx;

		&>.swiper {
			width: 100%;
			height: 644rpx;
			background: linear-gradient(180deg, #52C276 0%, #90EDB8 100%);
			padding-top: 20rpx;
			box-sizing: border-box;

			&>.swiper1 {
				width: calc(100% - 60rpx);
				height: 584rpx;
				border-radius: 20rpx;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
					image-rendering: -moz-crisp-edges;
						image-rendering: -o-crisp-edges;
						image-rendering: -webkit-optimize-contrast;
						image-rendering: crisp-edges;
						-ms-interpolation-mode: nearest-neighbor;
				}
			}
		}

		&>button {
			position: fixed;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			width: 690rpx;
			height: 88rpx;
			background: #52C276;
			font-size: 15px;
			color: #fff;
			line-height: 88rpx;
		}

		&>.mian {
			width: 100%;
			border-radius: 32rpx 32rpx 0 0;
			background: #F0F0F0;
			min-height: calc(100vh - 380rpx);
			transform: translateY(-22rpx);
			box-sizing: border-box;


			&>.module {
				width: 690rpx;
				background: #fff;
				border-radius: 20rpx;
				margin: 20rpx auto 0;
				padding: 0 30rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;

				&>image {
					width: 100%;
					image-rendering: -moz-crisp-edges;
					image-rendering: -o-crisp-edges;
					image-rendering: -webkit-optimize-contrast;
					image-rendering: crisp-edges;
					-ms-interpolation-mode: nearest-neighbor;
				}

				&>view {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 20rpx 0;
					font-size: 12px;

					&>p {
						margin: 0 44rpx;
					}

					&>span {
						width: 120rpx;
						height: 1px;
						background: #6D6D6D;
					}
				}
			}

			&>.price {
				width: 100%;
				min-height: 240rpx;
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: column;
				padding: 26rpx 40rpx 0;
				box-sizing: border-box;

				&>view {
					font-size: 25px;
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					&>p {
						font-size: 12px;
						color: #666666;
					}

					&>.u-icon {
						width: 30rpx;
						height: 30rpx;
						margin: 0 20rpx 0 46rpx;
					}
				}

				&>span {
					font-size: 13px;
					color: #666666;
				}

				&>p {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 15px;
					margin-bottom: 20rpx;

					&>span {
						font-size: 12px;
						color: #9E9E9E;
					}
				}
			}
		}
	}
</style>